<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>svg</title>
	<style type="text/css">
		img{
			width: 200px;
			height: 200px;
		}
		svg{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<svg style="width: 800px;height: 800px;">
		<rect x='200' y='200' rx ='10' width='200' height ='100' transform = 'rotate(-30)' style="stroke: black;stroke-width: 2;fill: red;"/>
		<circle cx='200' cy = '200' r = '50' stroke = 'blue' stroke-width="5" fill="white"/>
		<ellipse cx = '300' cy = '300' rx = '100' ry='50' stroke = 'green' stroke-width = '5' fill = 'red'/>
		<polygon points="100,100 159,281 5,169 195,169 41,281" stroke="black" stroke-width="3" fill="yellow"/>
		<circle cx = '400' cy = '50' r = '50' fill= 'black'/>
		<circle id = 'ctrl' cx = '600' cy = '50' r = '50' fill = 'red'stroke = 'blue' />
		<path id="cpath" d="M 500,50 Q 450,150 350,150" stroke="red" stroke-width="4" fill="none"/>
		
	</svg>
</body>
</html>
<script type="text/javascript">
	var cpx = 450;
	var cpy = 150;
	var cp = document.getElementById('ctrl');
	var cpath = document.getElementById('cpath');
	document.body.onkeydown = function(e){
		console.log(e.keyCode);
		switch (e.keyCode){
			case 38:
				//上
				cp.setAttribute('cy',Number(cp.getAttribute('cy'))-2);
				cpy -= 2;
				break;
			case 40:
				//下
				cp.setAttribute('cy',Number(cp.getAttribute('cy'))+2);
				cpy += 2;
				break;
			case 37:
				//下
				cp.setAttribute('cx',Number(cp.getAttribute('cx'))-2);
				cpx -= 2;
				break;
			case 39:
				//下
				cp.setAttribute('cx',Number(cp.getAttribute('cx'))+2);
				cpx += 2;
				break;
			default:
				break;
		}
		cpath.setAttribute("d","M 450,50 Q "+cpx+","+cpy+" 350,150");
	}
</script>